<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>游记明细</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travelContent.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/collectAndCancel.js"></script>

    <script>
        $(function () {
            var userStr = sessionStorage.getItem('user');
            var params = getParams();
            var travelId = params.id;
            if (params.id) {
                // console.log(params.id);
                var like;
                var likeNum;
                $.get(baseUrl + '/travels/' + params.id, function (data) {
                    if (params.id) {

                        $.get(baseUrl + '/travels/' + params.id, function (data) {
                            console.log(data);
                            $('.travels').renderValues(data);
                            likeNum = data.likeNum;
                            like = data.like + '';
                            if (like == 'true') {
                                $('#likeBtn').removeClass('fa-thumbs-o-up').addClass('fa-thumbs-up').attr('style', "color: #00bbd3");
                            }

                            //给button设置用户id值
                            $("#followBtn").attr("data-id", data.author.id);

                            //查询粉丝数
                            $.get(baseUrl + "/users/fans/" + data.author.id, function (data) {
                                $("#fansNum").html(data);
                            })
                        })

                        //点击查看用户
                        $("#followBtn").click(function () {
                            var userId = $("#followBtn").attr("data-id");
                            window.location.href = "userProfiles.html?id=" + userId;
                        })

                        //查询当前用户是否对该游记有收藏,有就操作
                        $.get(baseUrl + "/users/travesCollection/" + params.id, function (data) {
                            //有收藏,改变样式
                            changeClass(data);
                        })

                        //点击收藏改变样子,发送请求
                        $("#collectBtn").click(function () {
                            //判断是否登录
                            if (!userStr) {
                                $(document).dialog({
                                    type: 'confirm',
                                    closeBtnShow: true,
                                    content: '你还没登录,立刻登录?',
                                    onClickConfirmBtn: function () {
                                        window.location.href = '/login.html';
                                    },
                                    onClickCancelBtn: function () {
                                        //改变样式
                                        $("#likeBtn").removeClass('fa-thumbs-up').addClass('fa-thumbs-o-up');
                                    }
                                })
                                return;
                            }
                            //点击收藏和取消收藏
                            var url = baseUrl + '/users/changeTravelCollection/' + params.id
                            collectAndCancel(url);
                        })

                        //点赞和取消
                        $("#likeBtn").click(function () {
                            if (!userStr) {
                                $(document).dialog({
                                    type: 'confirm',
                                    closeBtnShow: true,
                                    content: '你还没登录,立刻登录?',
                                    onClickConfirmBtn: function () {
                                        window.location.href = '/login.html';
                                    },
                                    onClickCancelBtn: function () {
                                    }
                                });
                                return;
                            }

                            if (like == 'true') {
                                like = 'false';
                                $('#likeBtn').removeClass('fa-thumbs-up').addClass('fa-thumbs-o-up').attr('style', "color: black");
                                $('#likeBtn').html(--likeNum);
                                $.ajax({
                                    type: "delete",
                                    url: baseUrl + '/users/cancelLike/' + travelId + '/' + 1,//type: 1.游记;2.大攻略;3.日报;4.攻略文章
                                    // data: {
                                    //     travelId:travelId,
                                    //     type:1
                                    // },
                                    success: function () {
                                        $(document).dialog({
                                            type: 'notice',
                                            infoText: '已取消',
                                            autoClose: 1000,
                                            position: 'center'  // center: 居中; bottom: 底部
                                        });
                                    }
                                })
                            } else {
                                like = 'true';
                                $('#likeBtn').removeClass('fa-thumbs-o-up').addClass('fa-thumbs-up').attr('style', "color: #00bbd3");
                                $('#likeBtn').html(++likeNum);
                                $.ajax({
                                    type: "post",
                                    url: baseUrl + '/users/like/' + travelId + '/' + 1,//type: 1.游记;2.大攻略;3.日报;4.攻略文章
                                    success: function () {
                                        $(document).dialog({
                                            type: 'notice',
                                            infoText: '谢谢点赞!',
                                            autoClose: 1000,
                                            position: 'center'  // center: 居中; bottom: 底部
                                        });
                                    }
                                })
                            }
                        });

                    }

                    //点击评论图标按钮跳转到评论页面
                    $("#commentBtn").click(function () {
                        if (!userStr) {
                            $(document).dialog({
                                type: 'confirm',
                                closeBtnShow: true,
                                content: '你还没登录,立刻登录?',
                                onClickConfirmBtn: function () {
                                    window.location.href = '/login.html';
                                },
                                onClickCancelBtn: function () {
                                }
                            });
                            return;
                        }
                        window.location.href = "/mine/travelComment.html?id=" + params.id +"";
                    });
                    //增加浏览量
                    $.get(baseUrl + '/travels/updateBrowseNumById/' + params.id)
                })
            }
        })


    </script>
</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left"></i></span>
            </a>
        </div>
        <div class="col">
        </div>
    </div>
</div>

<div class="travels">
    <img class="cover" render-src="coverUrl">
    <div class="container">
        <h6 class="title" render-html="title">飞到羊城，只为一场最地道的早茶之旅</h6>
        <small>
            <span render-html="releaseTime" ></span>
            浏览: <span render-html="browseNum"></span>
            回复: <span render-html="commentNum"> 0</span>
        </small>
        <div class="row">
            <div class="col-2 img">
                <img class="rounded-circle" render-src="author.headImgUrl">
            </div>
            <div class="col-6 mine">
                <small>
                    <span render-html="author.nickName"></span>
                    <button class="btn btn-sm btn-outline-info" id="followBtn" data-id="">查看用户</button>
                    <br>
                    <span render-html="author.travelNum"></span>篇游记
                    <span id="fansNum"></span>个粉丝
                </small>
            </div>
            <div class="attention col">
                <span class="addr" render-html="place.name">广州</span>
            </div>
        </div>
    </div>
    ,
    <div class="container">
        <fieldset>
            <legend>我的出行信息</legend>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-calendar"></i> 出发时间 <span render-html="travelTime">2018-07-11</span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-money"></i> 人均费用
                    <span render-html="perExpends">120</span></div>
            </div>
            <div class="d-flex">
                <div class="p-2  flex-fill">
                    <i class="fa fa-user-circle"></i> 人物
                    <span render-html="personString">和朋友</span>
                </div>
                <div class="p-2  flex-fill"><i class="fa fa-clock-o"></i> 出行天数
                    <span render-html="days">1</span>
                </div>
            </div>
        </fieldset>

        <div class="content" render-html="travelContent.content">

        </div>
    </div>

    <hr>

    <div class="container d-flex">
        <div class="p-2  flex-fill">
            <i class="fa fa-thumbs-o-up" id="likeBtn" render-html="likeNum"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa  fa-commenting-o"  id="commentBtn" render-html="commentNum"> </i>
        </div>
        <div class="p-2  flex-fill"><i class="fa fa-star-o" id="collectBtn" data-collection=""> </i>
        </div>
    </div>
</div>
</body>

</html>